<template>
    <div class="container">
        <el-card class="box-card" shadow="always">
            <div class="des">
                <div class="des-left">
                    购买说明
                </div>
                <div class="des-right">
                    <div class="des-item">1.短信套餐不可自定义签名，短信签名统一为【福建凌创科技】不可更改。</div>
                    <div class="des-item">2.所有短信套餐包都是国内短信。</div>
                    <div class="des-item"> 3.短信套餐是有时效性的，超过时效性如还剩短信条数，系统自动清零。</div>
                </div>
            </div>
        </el-card>

        <el-card class="box-card mt20" shadow="always">
            <el-form :model="form" ref="form" :rules="rules" label-width="90px">
                <el-form-item label="套餐类型:" prop="packageType">
                    <el-select v-model="form.packageType" style="width: 200px;">
                        <el-option label="提醒套餐" value="0"></el-option>
                        <el-option label="验证码套餐" value="1"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="短信条数:" prop="packageNum">
                    <el-radio-group v-model="form.packageNum" @change="numChange">
                        <el-radio border v-for="(item, index) in msg_plan" :key="index" :label="item.label" :value="item.value"></el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="购买时长:" prop="indate">
                        <el-radio-group v-model="form.indate">
                            <el-radio border label="1年" :value="1"></el-radio>
                        </el-radio-group>
                </el-form-item>
            </el-form>
            <div class="btn-bottom">
                <div class="pay-info" v-if="form.currentAmount">
                    <div class="text">应付费用:</div>
                    <div class="amount">￥{{ form.currentAmount }}</div>
                </div>
                <el-button type="primary" @click="submitForm('form')">立即购买</el-button>
            </div>
        </el-card>
    </div>
</template>

<script>
import modelMixin from '@/mixins/modelMixin';
import request from '@/utils/request';

export default {
    name: "addForm",
    mixins: [modelMixin],
    data() {
        return {
            msg_plan: [],
            form:{
                packageType: '',
                packageNum: '',
                indate: 1,
                currentAmount: '',
            },
            rules: {
                packageType: [{ required: true, message: '请选择套餐类型', trigger: 'change' }],
                packageNum: [{ required: true, message: '请选择短信条数', trigger: 'change' }],
                indate: [{ required: true, message: '请选择购买时长', trigger: 'change' }],
            },
        }
    },
    created() {
        this.getDicts(['msg_plan']);
    },
    methods: {
        numChange(val) {
            this.form.currentAmount = val.split(',')[1];
        },
        
        /**
         * @提交
         * @param {*} close 
         */
        submitForm(close = true) {
            this.$refs.form.validate(valid => {
                if (valid) {
                    typeof (this.classifyForm) === 'function' && this.classifyForm()
                    this.loading = true
                    request({
                        url: '/system/messagePayHistory',
                        method: 'post',
                        data: {...this.form, packageNum: this.form.packageNum.split(',')[0]},
                    }).then(res => {
                        if (res.code == 200) {
                            this.loading = false
                            this.$modal.msgSuccess('操作成功')
                            this.form = {
                                packageType: '',
                                packageNum: '',
                                indate: 1,
                                currentAmount: '',
                            }
                        } else {
                            this.$modal.msgError(res.msg)
                        }
                    }).catch(() => {
                        this.loading = false
                    })
                }
            });
        },
    },
}
</script>

<style scoped lang="scss">
.container {
    width: 1200px;
    padding: 20px;
    margin: 0 auto;
    box-sizing: border-box;
}

.des {
    display: flex;
    font-size: 14px;
    color: #606266;
    .des-left{
        margin-right: 20px;
        line-height: 40px;
    }
    .des-right{
        line-height: 40px;
    }
}

.number {
    .number-item {
        width: 140px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        border: 1px solid #ccc;
        display: inline-block;
        margin-right: 10px;
        border-radius: 8px;
        cursor: pointer;
        color: #fff;
        background-color: #409eff;
    }
}
.btn-bottom{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 60px;
    padding-right: 60px;
    .pay-info{
        display: flex;
        align-items: center;
        margin-right: 40px;
        .text{
            margin-right: 10px;
        }
        .amount{
            color: #f56c6c;
            font-size: 20px;
        }
    }
}
</style>